<template>
    <view class="idle-detail">
        <header-vue :back="true" :shopName="true">
            <template v-slot:shop-name>
                <!-- 头像+昵称 -->
                <view class="flex start">
                    <u-image :src="(detail.member && detail.member.userpic) || '/static/community/avatar.png'" width="40rpx" height="40rpx" radius="50%"></u-image>
                    <view class="nickname">{{ (detail.member && detail.member.nickname) || '' }}</view>
                </view>
            </template>
            <template v-slot:btnLt>
                <!-- 日期 -->
                <view class="date">{{ createdAtText }}</view>
            </template>
        </header-vue>
        <view class="content">
            <!-- 商品图片轮播 -->
            <view class="product-images">
                <swiper class="swiper" :autoplay="false" :circular="true">
                    <swiper-item v-for="(image, index) in (detail.images || [])" :key="index">
                        <u-image :src="image" width="100%" height="500rpx" mode="aspectFill"></u-image>
                    </swiper-item>
                </swiper>
            </view>
            
            <!-- 商品信息 -->
            <view class="product-info">
                <view class="product-title">{{ detail.title }}</view>
                <view class="product-price">
                    <view class="price">¥<text class="decimal">{{ priceParts.int }}.</text>{{ priceParts.dec }}</view>
                    <text class="negotiable" v-if="detail.price_mode == 2">可议价</text>
                </view>
                <view class="product-desc">{{ detail.desc }}</view>
            </view>
            
            <!-- 闲置说明 -->
            <view class="idle-notes">
                <view class="notes-title">闲置说明</view>
                <view class="notes-content">
                    <u-parse :content="detail.content" />
                </view>
            </view>
            
            <!-- 底部操作栏 -->
            <footerVue>
                <view class="footer-content">
                    <!-- 左侧图标区域 -->
                    <view class="left-icons">
                        <view class="icon-item" @click="toggleFavorite">
                            <u-icon :name="detail.is_favorite ? 'heart-fill' : 'heart'" :color="detail.is_favorite ? '#ff4757' : '#333'" size="24"></u-icon>
                            <text class="icon-text">{{ detail.want_count || 0 }}人想要</text>
                        </view>
                        <view class="icon-item" @click="shareProduct">
                            <u-icon name="share" color="#333" size="24"></u-icon>
                            <text class="icon-text">分享</text>
                        </view>
                    </view>
                    
                    <!-- 右侧按钮区域 -->
                    <view class="right-buttons">
                        <view class="contact-btn" @click="contactSeller" v-if="detail.price_mode == 2">
                            <text>联系卖家</text>
                        </view>
                        <view class="buy-btn" :class="{ lg: detail.price_mode != 2 }" @click="buyNow">
                            <text>立即购买</text>
                        </view>
                    </view>
                </view>
            </footerVue>
        </view>
    </view> 
</template>
<script>
import headerVue from '@/components/header.vue'
import footerVue from '@/components/fixed-footer/index.vue'
import { getIdleDetail } from '@/api/index.js'
import { formatPublishTime } from '@/utils/utils.js'

export default {
    name: 'IdleDetail',
    components: {
        headerVue,
        footerVue
    },
    data() {
        return {
          
            detail: {}
        }
    },
    computed: {
        createdAtText() {
            if (!this.detail || !this.detail.created_at) return ''
            const ts = /^(\d+)$/.test(String(this.detail.created_at)) ? Number(this.detail.created_at) : Date.parse(this.detail.created_at) / 1000
            if (!ts || Number.isNaN(ts)) return ''
            return formatPublishTime(ts, 'YYYY-MM-DD')
        },
        priceParts() {
            const priceStr = this.detail && this.detail.price ? String(this.detail.price) : '0.00'
            const parts = priceStr.split('.')
            return { int: parts[0] || '0', dec: (parts[1] || '00').padEnd(2, '0') }
        }
    },
    onLoad(option) {
        this.getDetail(option.id)
    },
    methods: {
        async getDetail(id) {
            // TODO: 根据ID获取详情数据
            const res = await getIdleDetail(id)
            if (res.errno === 0) {
                const safeMember = (res.data && res.data.member) ? res.data.member : { userpic: '/static/community/avatar.png', nickname: '' }
                this.detail = { member: safeMember, ...res.data }
            }
        },
        contactSeller() {
            const phone = (this.detail.phones && this.detail.phones[0]) || this.detail.phone || '123456798'
            uni.showModal({
                title: '提示',
                content: `是否用这个号码“${phone}”给商家致电？`,
                confirmText: '致电',
                cancelText: '取消',
                success: (res) => {
                    if (res.confirm) {
                        uni.makePhoneCall({ phoneNumber: phone })
                    }
                }
            })
        },
        toggleFavorite() {
            this.detail.is_favorite = !this.detail.is_favorite
            if (this.detail.is_favorite) {
                this.detail.want_count += 1
            } else {
                this.detail.want_count = Math.max(0, this.detail.want_count - 1)
            }
            uni.showToast({
                title: this.detail.is_favorite ? '已收藏' : '已取消收藏',
                icon: 'none'
            })
        },
        shareProduct() {
            // TODO: 分享功能
            uni.showToast({
                title: '分享功能待开发',
                icon: 'none'
            })
        },
        buyNow() {
            try {
                this.$store && this.$store.commit && this.$store.commit('SET_IDLE_ORDER_ITEM', this.detail)
            } catch (e) {}
            uni.navigateTo({ url: `/views/order/idle-confirm-order?id=${this.detail.id}` })
        }
    }
}
</script>
<style lang="scss" scoped>
.idle-detail {
    width: 100%;
    min-height: 100vh;
    background: #f5f5f5;

    .nickname {
        margin-left: 10rpx;
        font-size: 28rpx;
        color: #333;
    }

    .date {
        font-size: 24rpx;
        color: #999;
    }

    .content {
        padding-bottom: 120rpx; // 为底部操作栏留出空间
    }

    .product-images {
        background: #fff;
        .swiper {
            height: 500rpx;
        }
    }

    .product-info {
        background: #fff;
        padding: 30rpx;
        
        .product-title {
            font-size: 36rpx;
            color: #333;
            font-weight: 600;
            margin-bottom: 20rpx;
        }
        
        .product-price {
            display: flex;
            align-items: baseline;
            margin-bottom: 20rpx;
            
            .price {
                font-size: 28rpx;
                color: #ff4757;
                font-weight: 600;
                margin-right: 20rpx;

                .decimal {
                    font-size: 36rpx;
                }
            }
            
            .negotiable {
                font-size: 20rpx;
                color: #999;
            }
        }
        
        .product-desc {
            font-size: 28rpx;
            color: #333;
            line-height: 1.6;
        }
    }

    .idle-notes {
        background: #fff;
        padding: 30rpx;
        margin-top: 20rpx;
        
        .notes-title {
            font-size: 24rpx;
            color: #333;
            font-weight: 600;
            margin-bottom: 20rpx;
        }
        
        .notes-content {
            font-size: 24rpx;
            color: #999;
            line-height: 1.6;
        }
    }

    .footer-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100rpx;
        
        .left-icons {
            display: flex;
            gap: 40rpx;
            
            .icon-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8rpx;
                
                .icon-text {
                    font-size: 20rpx;
                    color: #333;
                }
            }
        }
        
        .right-buttons {
            display: flex;
            gap: 20rpx;
            
            .contact-btn {
                background: linear-gradient( 90deg, #DF9824 0%, #F4B042 100%);
                box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(223,152,36,0.1);
                color: #fff;
                padding: 14rpx 42rpx;
                border-radius: 42rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 36rpx;
                font-weight: 600;
            }
            
            .buy-btn {
                background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
                box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
                color: #fff;
                padding: 14rpx 42rpx;
                border-radius: 42rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 36rpx;
                font-weight: 600;

                &.lg {
                    width: 350rpx;
                }
            }
        }
    }
}
</style>